import React from 'react'
import ReactDOM from 'react-dom'
import { HashRouter, Route, Switch, Redirect } from 'react-router-dom'
import '@/utility/reset.css'
import 'antd-mobile/dist/antd-mobile.css'
import './index.css'
import '@utility/adaptive'
import Nopage from '@pages/nopage/nopage'
import Tabs from '@components/tabbar/tabbar'
import Login from '@pages/login/login'
import Form1 from '@pages/form/form1'
import Form2 from '@pages/form/form2'
import Room from '@pages/room/room'

class Index extends React.Component {

  state = {
    shareModalShow: false, // 是否显示分享弹窗
  }

  // 关闭分享弹窗
  closeShareModal = () => {
    this.setState({
      shareModalShow: false
    })
  }

  render() {
    let { shareModalShow } = this.state
    return (
      <div className="_index">
        <HashRouter basename="/">
          <Switch>
            <Route path="/404" exact component={ Nopage }></Route>
            <Route path="/tabbar" component={ Tabs }></Route>
            <Route path="/login" exact component={ Login }></Route>
            <Route path="/form1" exact component={ Form1 }></Route>
            <Route path="/form2" exact component={ Form2 }></Route>
            <Route path="/room" exact component={ Room }></Route>
            <Redirect path="/" exact to="/tabbar"></Redirect>
            <Redirect path="*" to="/404"></Redirect>
          </Switch>
        </HashRouter>
        {
          shareModalShow &&
          <div className="share_modal" onClick={ this.closeShareModal }>
            <img className="share_modal-finger" src="./images/share_finger.png" alt=""/>
          </div>
        }
      </div>
    )
  }

}

ReactDOM.render(
  <Index />,
  document.getElementById('root')
)